<template>
  <div class="theme-list">
    <div class="title">{{item.shop_name}}</div>
    <el-checkbox v-model="checkAll"  @change="handleCheckAllChange(item.theme_info)">全选</el-checkbox>

    <el-checkbox-group v-model="checkedThemes" @change="handleThemeChange(item.theme_info)">
      <el-checkbox  v-for="theme in item.theme_info" :label="theme"  :key="theme.theme_id" >{{theme.theme_name}}</el-checkbox>
    </el-checkbox-group>
  </div>
</template>

<script>
    export default {
        name: "checkBox",
      props:['item'],
      data(){
        return{
          checkAll:false,
          checkedThemes:[]
        }
      },
      methods:{
        handleThemeChange(allTheme){
          if(JSON.stringify(this.checkedThemes) == JSON.stringify(allTheme)){
            this.checkAll = true;
          }else{
            this.checkAll = false;
          }
        },
        handleCheckAllChange(allTheme){
          if(this.checkAll == true){
            this.checkedThemes = allTheme;
          }else{
            this.checkedThemes = [];
          }
        },
        uploadChecked(themes){
          this.checkedThemes = themes;
        },
        getCheckedThemes(){
          return {
            "shop_id":this.item.shop_id,
            "shop_name":this.item.shop_name,
            "theme_info":this.checkedThemes
          }
        }
      }
    }
</script>

<style scoped lang="scss">
  .el-checkbox-group{
    display:inline-block;
    margin-left:10px;
  }
  .theme-list{
    margin-bottom:30px;
    .title{
      font-family: PingFangSC-Medium;
      font-size: 16px;
      color: #000000;
      letter-spacing: 0;
      margin-bottom: 15px;
    }
  }

</style>
